<template>
  <div>
    <SearchBar :option="searchProps" @search="handleSearch"/>
    <div style="margin-left: auto; margin-bottom: 20px">
      <el-button plain type="primary" @click="() => addVisible = true">+ 添加门禁</el-button>
    </div>
    <el-table :data="list" v-loading="loading">
      <el-table-column label="名称" prop="faceLockName"></el-table-column>
      <el-table-column label="SN" prop="faceLockSn"></el-table-column>
      <el-table-column label="最近更新时间" prop="lastLoginTime"></el-table-column>
      <el-table-column label="状态" prop="status">
        <template #default="{ row }">
          <el-tag v-if="row.statusName === '离线'" type="danger">{{ row.statusName }}</el-tag>
          <el-tag v-else type="success">{{ row.statusName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="关联房间数" prop="roomCount" width="100" align="center">
        <template #default="scope">
          <el-button 
            link 
            type="primary" 
            @click="showRoomList(scope.row)"
          >
            {{ scope.row.roomCount || 0 }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <div class="flex-row-center">
            <el-button link type="primary" @click="handleMaterEdit(row)">编辑</el-button>
            <el-button link type="primary" @click="handleOpenDoor(row)">远程开门</el-button>
            <el-button link type="primary" @click="handleGetPerson(row)">人员列表</el-button>
            <!-- <el-button link type="primary" @click="handleSyncPerson(row)">模拟下发人脸</el-button> -->
<!--            <el-dropdown trigger="click" placement="bottom-start" @command="moreCommand($event, row)">-->
<!--              <el-button link type="primary">更多</el-button>-->
<!--              <template #dropdown>-->
<!--                <el-dropdown-menu>-->
<!--                  <el-dropdown-item command="syncPerson">同步人员信息</el-dropdown-item>-->
<!--                </el-dropdown-menu>-->
<!--              </template>-->
<!--            </el-dropdown>-->
          </div>
        </template>
      </el-table-column>
    </el-table>
    <RentersDw :visible="rentersVisible" :row="selectRow" @cancel="handleRentersCancel" />
    <FaceLockEdit :visible="editVisible" :row="selectRow" @ok="handleEditOk" @cancel="handleEditCancel" />
    <FaceLockAdd :visible="addVisible" :row="selectRow" @ok="handleAddOk" @cancel="handleAddCancel" />
    <FaceLockRoomsDrawer
      v-model="roomDrawerVisible"
      :face-lock-id="currentFaceLock.faceLockId"
      :face-lock-name="currentFaceLock.faceLockName"
      @refresh="getList"
    />
  </div>
</template>
<script setup>
import SearchBar from '../component/searchBar.vue'
import { useRouter } from 'vue-router'
import RentersDw from './rentersDw.vue'
import SettingDl from './settingDl.vue'
import FaceLockRoomsDrawer from './components/FaceLockRoomsDrawer.vue'
import FaceLockEdit from './faceLockEdit.vue'
import FaceLockAdd from './faceLockAdd.vue'
import { getList as getFaceLockList, openDoor, syncPerson } from '@/api/device/faceLock.js'

const { proxy } = getCurrentInstance()
const router = useRouter()

const loading = ref(false)
const total = ref(0)
const list = ref([])
const row = ref({})
const queryParams = ref({})
const selectRow = ref({})
const settingVisible = ref(false)
const rentersVisible = ref(false)
const editVisible = ref(false)
const addVisible = ref(false)
const searchProps = ref({
  group: false,
  smartMeterType: false,
  searchStr: {
    show: true,
    key: 'searchStr',
    placeholder: '请输入门禁名称、SN号'
  }
})
const data = reactive({
  accociation: {
    deviceType: 1,
    isPublic: false,
    data: [],
    total: 0,
    pageNum: 1,
    pageSize: 20,
    visible: false
  }
})
const { accociation } = toRefs(data)
const roomDrawerVisible = ref(false)
const currentFaceLock = ref({})

/* 搜索 */
function handleSearch(params) {
  queryParams.value = { ...queryParams.value, ...params }
  console.log(queryParams.value)
  getList()
}

/* 开门 */
function handleOpenDoor(row) {
  selectRow.value = row
  console.log(row)

  openDoor(row.faceLockId).then(() => {
    proxy.$message.success('操作成功')
  })
}

/* 同步人员信息 */
function handleSyncPerson(row) {
  selectRow.value = row
  console.log(row)

  syncPerson(row.faceLockId).then(() => {
    proxy.$message.success('操作成功')
  })
}

/* 同步人员信息 */
function handleGetPerson(row) {
  selectRow.value = row
  rentersVisible.value = true
}


// 更多操作按钮
function moreCommand(value, row) {
  switch (value) {
    case 'openDoor':
      handleOpenDoor(row)
      break
    case 'syncPerson':
      handleSyncPerson(row)
      break
    case 'getPersons':
      handleGetPerson(row)
      break
    default:
      break;
  }
}

/* 历史记录 */
function handleHistoryRecord() {
  proxy.$refs['historyRecordRef'].show()
}

/* 关联房间 */
function associationRoom(row) {
  accociation.value.isPublic = false
  handleGetAssociationList()
  accociation.value.visible = true
}
// 获取列表数据
function handleGetAssociationList() {
  let floor = accociation.value.pageNum
  let data = new Array(20).fill(1).map((item, index) => {
    let number = index + 1
    let roomNumber = floor + (number < 10 ? '0' + number : number.toString() )
    return {
      roomName: '泰寓' + roomNumber,
      id: roomNumber
    }
  })
  accociation.value.data = data
  accociation.value.total = 60
}

/* 编辑 */
function handleMaterEdit(row) {
  selectRow.value = row
  editVisible.value = true
}
function handleEditOk(value) {
  editVisible.value = false
  getList()
}
function handleEditCancel() {
  editVisible.value = false
}
function handleRentersCancel() {
  rentersVisible.value = false
}

function handleAddOk() {
  addVisible.value = false
  getList()
}
function handleAddCancel() {
  addVisible.value = false
}

function getList() {
  loading.value = true
  list.value = []
  getFaceLockList(queryParams.value).then((res) => {
    if (res.code === 200) {
      list.value = res.rows
      total.value = res.total
    }
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}

function showRoomList(row) {
  currentFaceLock.value = row
  roomDrawerVisible.value = true
}

getList()
</script>
